<template>
  <a-modal
    title="积分记录"
    :ok-button-props="{ style: okHidden && { display: 'none' } }"
    :width="680"
    :visible="visible"
    :confirmLoading="isLoading"
    @ok="onReject"
    @cancel="() => { $emit('cancel') }"
  >
    <div style="padding-bottom: 80px;">
      <div v-show="isLoading" class="example-integral">
        <a-spin />
      </div>
      <div class="list">
        <label class="title">积分类型</label>
        <span>{{ formData.action_name }}</span>
      </div>
      <div class="list">
        <label class="title">分值</label>
        <span>{{ formData.point }}</span>
      </div>
      <div class="list">
        <label class="title">对应家庭</label>
        <span>{{ formData.family_no }}</span>
      </div>
      <div class="list">
        <label class="title">对应村</label>
        <span>{{ formData.village_name }}</span>
      </div>
      <div class="list">
        <label class="title">志愿者姓名</label>
        <span>{{ formData.fullname }}</span>
      </div>
      <div class="list" v-show="detailsType === 1">
        <label class="title">驳回原因</label>
        <a-textarea style="width: calc(100% - 140px);" :maxLength="10" placeholder="" allow-clear @change="onChange" />
      </div>
    </div>
  </a-modal>
</template>

<script>
import { reject } from '@/api/bank'

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    okHidden: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    detailsType: {
      type: Number,
      default: () => 0
    },
    formData: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      currentPage: 1,
      total: 0,
      form: this.$form.createForm(this),
      currentLength: 0,
      listData: [],
      remark: '',
      isLoading: false
    }
  },
  created () {
  },
  mounted () {
    // this.getFamilyPointDetail()
    this.$nextTick(() => {
      if (this.detailsType === 0) {
        const btn = document.getElementsByClassName('ant-modal-footer')[0]
        btn.getElementsByClassName('ant-btn ant-btn-primary')[0].style.display = 'none'
      }
    })
  },
  methods: {
    textareaChange () {
      this.form.validateFields((errors, values) => {
        this.currentLength = values.explain.length
      })
    },
    onReject () {
      // 获取明细详情
      if (this.remark == '') {
        this.$notification.error({
          message: '提示',
          description: `驳回原因不能为空`
        })
        return
      }
      this.isLoading = true
      reject({ remark: this.remark, log_id: this.formData['log_id'] }).then((res) => {
        this.isLoading = false
        if (res.is_ok === 'Y') {
          this.$notification.success({
            message: '提示',
            description: `操作完成`
          })
          this.$emit('fatherMethod')
        }
      }).catch(() => {
        this.isLoading = false
      })
    },
    changePage () {
      this.data.page = this.currentPage
      this.getFamilyPointDetail()
    },
    onChange (ev) {
      // 文本输入
      this.remark = ev.target._value
    }
  }
}
</script>

<style scoped>
  .list{
    margin-top: 20px;
    width: 100%;
    overflow: hidden;
  }
  .box{
    border: 1px solid #222;
    padding: 20px ;
    overflow: hidden;
  }
  .title{
    font-size: 16px;
    font-weight: bold;
    width: 120px;
    display: block;
    float: left;
  }
  .example-integral {
    width: 100%;
    height: calc(100% - 50px);
    background-color: rgba(255, 255, 255, .6);
    position: absolute;
    text-align: center;
    margin-left: -24px;
    margin-top: -100px;
    line-height: 400px;
    z-index: 9;
  }
</style>
